<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
    <div class="row">
        <h3 class="text-center">csrf登录</h3>
        <div class="col-md-8 col-md-offset-2">
            <div>
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" name="username" id="username" class="form-control">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" name="password" id="password" class="form-control">
                </div>
                <div class="form-group">
                    <label for="btn_login"></label>
                    <input type="button" id="btn_login" class="btn btn-primary btn-block" value="登录">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $.ajax({
        url: '{% url "csrf:get_token_value" %}',
        success: function (res) {
            localStorage.setItem('csrftoken', res)
        },
    })
    $('#btn_login').click(function () {
        $.ajax({
            url: '{% url "csrf:login" %}',
            type: 'post',
            data: {
                'username': $('#username').val(),
                'password': $('#password').val(),
                {#'csrfmiddlewaretoken': localStorage.getItem('csrftoken'),#}
            },
            headers: {'X-CSRFToken': localStorage.getItem('csrftoken')},
            success: function (res) {
                location.href = '{% url "csrf:index" %}';
            },
        })
    })
</script>


</body>
</html>